<template>
  <div class="app-container">
    <custom-container ref="customContainerRef" :config="mainConfig"></custom-container>
    <!-- 新增或修改机场信息 -->
    <setForm
      ref="setFormRef"
      v-model:open="open"
      v-model:title="title"
      @changeList="handleQuery"
    />
  </div>
</template>
<script lang="ts" setup>
import { Edit, Delete, Search, Refresh, Plus, Download, Document } from '@element-plus/icons-vue'
import { ref, getCurrentInstance, computed, defineAsyncComponent } from 'vue'
import { ElButton, ElMessage, ElMessageBox } from 'element-plus'
import { useI18n } from 'vue-i18n'
import { getAirport, delAirport, getAirportDetail } from '@/api/basicConfig/airportMaintanance'

const setForm = defineAsyncComponent(() => import('./components/setForm.vue'))
const { t } = useI18n()
// 非单个禁用
let
  single = ref(true),
  // 非多个禁用
  multiple = ref(true),
  open = ref(false),
  title = ref(''),
  queryParams = ref({
    cityName: undefined,
    airportName: undefined,
    airportNameEn: undefined,
    airportThreeCode: undefined,
    airportRourCode: undefined,
    pageNum: 1,
    pageSize: 10,
  }),
  customContainerRef = ref(null),
  setFormRef = ref(null),
  {
    appContext: {
      config: {
        globalProperties: { $resetForm, $download },
      },
    },
  } = getCurrentInstance()
// 列表查询
const handleQuery = () => {
  customContainerRef.value.getList()
}
// 多选
let ids = []
const handleTableSelect = (rows: { [key: string]: any }[]) => {
  ids = rows.map((row) => row.id)
  single.value = rows.length !== 1
  multiple.value = !rows.length
}
// 添加机场信息
const handleAdd = () => {
  open.value = true
  title.value = '新增机场信息'
}
// 导出轨迹描述
const handleExport = () => {
  $download(
    '/system/trajectory/description/export',
    {
      ...queryParams.value,
    },
    'system_description.xlsx',
  )
}
// 删除机场信息
const handleDelete = (row: { [key: string]: any }) => {
  const id = row.id || ids
  ElMessageBox.confirm(`"是否确认删除机场编号为"${ id }"的数据项?"`, '警告', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning',
  }).then((res) => {
    delAirport(id)
    ElMessage.success('删除成功')
    handleQuery()
  })
  .catch((error) => {
    if (error == 'cancel') {
      ElMessage.error(error)
    }
  })
}
// 修改轨迹描述
const handleUpdate = (row: { [key: string]: any }) => {
  const id = row.id || ids
  open.value = true
  title.value = '修改机场信息'
  setFormRef.value.getDetail(id)
}
const mainConfig = computed(() => {
  const queryFields = 'basicConfig.airportMaintenance.queryFields.'
  const btns = 'basicConfig.airportMaintenance.btns.'
  const columns = 'basicConfig.airportMaintenance.columns.'
  return {
    query: {
      fields: [
        {
          label: t(`${ queryFields }cityName`),
          prop: 'cityName',
          option: {
            placeholder: '请输入城市',
           
          },
        },
        {
          label: t(`${ queryFields }airportName`),
          prop: 'airportName',
          option: {
            placeholder: '请输入机场中文名',
           
          },
        },
        {
          label: t(`${ queryFields }airportNameEn`),
          prop: 'airportNameEn',
          option: {
            placeholder: '请输入机场英文名',
        
          },
        },
        {
          label: t(`${ queryFields }airportThreeCode`),
          prop: 'airportThreeCode',
          option: {
            placeholder: '请输入机场三字码',
       
          },
        },
        {
          label: t(`${ queryFields }airportRourCode`),
          prop: 'airportRourCode',
          option: {
            placeholder: '请输入机场四字码',
     
          },
        },
      ],
      queryParams: queryParams.value,
      formOption: {
        labelWidth: '120px',
      },
    },
    btns: [
      {
        title: t(`${ btns }add`),
        icon: Plus,
        onClick: handleAdd,
      },
      {
        title: t(`${ btns }delete`),
        icon: Delete,
        type: 'danger',
        disabled: multiple.value,
        onClick: handleDelete,
      },
      {
        title: t(`${ btns }export`),
        type: 'warning',
        icon: Download,
        onClick: handleExport,
      },
    ],
    table: {
      columns: [
        {
          type: 'selection',
          width: '55',
          align: 'center',
        },
        {
          label: t(`${ columns }cityName`),
          prop: 'cityName',
          align: 'center',
        },
        {
          label: t(`${ columns }airportName`),
          prop: 'airportName',
          align: 'center',
        },
        {
          label: t(`${ columns }airportNameEn`),
          prop: 'airportNameEn',
          align: 'center',
        },
        {
          label: t(`${ columns }airportThreeCode`),
          prop: 'airportThreeCode',
          align: 'center',
        },
        {
          label: t(`${ columns }airportQuadrupleCode`),
          prop: 'airportQuadrupleCode',
          align: 'center',
        },
        {
          label: t(`${ columns }operation`),
          className: 'custormFixedCol',
          render: (h, params) => {
            const buttons = [
              {
                title: t(`${ btns }edit`),
                clickFun: handleUpdate,
              },
              {
                title: t(`${ btns }delete`),
                clickFun: handleDelete,
              },
            ]
            return buttons.map((el) => h(
              ElButton,
              {
                text: true,
                type: 'primary',
                onClick: () => {
                  el.clickFun(params.row)
                },
              },
              {
                default: () => el.title,
              },
            ))
          },
        },
      ],
      event: {
        onSelectionChange: (rows) => {
          handleTableSelect(rows)
        },
      },
    },
    api: getAirport,
  }
})
</script>
